<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>品牌管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
	<h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()"><i class="fa fa-trash-o"></i>删除</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i>刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">

			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<div id="brand"></div>
		<div th:insert="page.html"></div>

	</div>
	<!-- 数据表格 /-->

</div>
<!-- /.box-body -->

<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">品牌编辑</h3>
			</div>
			<form id="insertInfo">
				<div class="modal-body">
					<table class="table table-bordered table-striped"  width="800px">
						<tr>
							<td>品牌名称</td>
							<td><input  class="form-control" name="name" placeholder="品牌名称" >  </td>
						</tr>
						<tr>
							<td>首字母</td>
							<td><input  class="form-control" name="firstChar" placeholder="首字母">  </td>
						</tr>
					</table>
				</div>
			</form>
			<div class="modal-footer">
				<input button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toAdd()" value="保存"/>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 编辑,修改窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel2">修改编辑</h3>
			</div>
			<div class="modal-body">
				<!--修改品牌信息,表单序列化-->
				<form id="updateForm">
					<div id="update_id"></div>
				</form>
			</div>
			<div class="modal-footer">
				<input button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateInfo()" value="修改"/>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<script>
	$(function (){
		getData();
	})
	function getData(){
		$.ajax({
			url:"/brandController/brandList",
			data:{pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val()},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result){
				var page = result.data;
				var list = page.rows;
					var table="";
					table +='<table id=\"dataList\" class=\"table table-bordered table-striped table-hover dataTable\">';
					table +='<thead>';
					table +='<tr>';
					table +='<th className="" style="padding-right:0px">';
					table +='<input id="selall" type="checkbox" className="icheckbox_square-blue">';
					table +='</th>';
					table +='<th className="sorting_asc">品牌ID</th>';
					table +='<th className="sorting">品牌名称</th>';
					table +='<th className="sorting">品牌首字母</th>';
					table +='<th className="text-center">操作</th>';
					table +='</tr>';
					table +='</thead>';
					table +='<tbody>';
					for (var i = 0; i < list.length; i++) {
						table +='<tr>';
						table +='<td><input type="checkbox" name="box" value="'+list[i].id+'"></td>';
						table +='<td>'+list[i].id+'</td>';
						table +='<td>'+list[i].name+'</td>';
						table +='<td>'+list[i].firstChar+'</td>';
						table+='<td className="text-center">';
						table+='<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="selectBrandById('+list[i].id+')" data-target="#updateModal">修改</button>';
						table+='</td>';
						table+='</tr>';
					}
					table +='</tbody>';
					table +="</table>";

				$("#brand").html(table);
				buildPage(page)
			},
			error:function (result){
				alert("网络异常,请重新查询")
			}
		})
	}
	//增加品牌信息
	function toAdd(){
		$.ajax({
			url :"/brandController/insertInfo",
			type:"post",
			dataType:"json",
			data :$("#insertInfo").serialize(),
			async :true,
			success : function (result){
				if (result.code==10000){
					alert("增加成功")
					window.location.reload();
				}
			},
		})
	}
	//回显,修改
	function selectBrandById(id){
		$.ajax({
			url:"/brandController/toUpdate/"+id,
			type :"post",
			dataType:"json",
			async:false,
			success:function (result){
				var list = result.data;
				var table ='<table className="table table-bordered table-striped" width="800px">';
				table += '<tr><td></td><td><input type="hidden" className="form-control" value="'+ list.id +'" name="id" placeholder="首字母"></td></tr>';
				table += '<tr><td>品牌名称</td><td><input className="form-control" value="'+ list.name +'" name="name" placeholder="品牌名称"></td></tr>';
				table += '<tr><td>首字母</td><td><input className="form-control" value="'+ list.firstChar +'" name="firstChar" placeholder="首字母"></td></tr>';
				table += '</table>';
				$("#update_id").html(table);

			},
		})
	}
	//修改品牌信息
	function updateInfo(){
		$.ajax({
			url :"/brandController/updateInfo",
			type:"post",
			dataType:"json",
			data:$("#updateForm").serialize(),
			success : function (result){
				if (result.code==10000){
					alert("修改成功")
					window.location.reload();
				}
			},
		})
	}
	//批量删除
	function deleteAll(){
		var boxs = $("[name=box]:checked")
		var ids =[];
		$(boxs).each(function (i,e){
			ids.push(e.value);
		})
		$.ajax({
			url :"/brandController/deleteAll",
			type:"post",
			data:{ids:ids},
			dataType:"json",
			async:true,
			success:function (result){
				if (result.code==10000){
					alert("删除成功");
					window.location.reload();
				}
			},
		})
	}
</script>
</body>
</html>